余烬缀记

JavaScript 中 historyPushState 的使用记录

笔记

# history.pushState

html5 定义了一个想浏览器历史追加状态的 API，主要以此来实现浏览器前进后退和正常的一模一样。它总共有三个参数：

  1. state 它是一个对象一般储存字符串 [我出现过存 HTML 对象的，报错了~~,只能存字符串]
  2. title 它主要用来代表新页面的标题但被多数浏览器忽略，一般设置为 null
  3. url 它代表新页面的 URL，它会更新浏览器的 url 相对地址，但是不会验证是否为真实的，它只能设置相同的域名的 URL，是不能将啥大网站的 URL 设置到你这的。

一般将数据存储到 state 中，比如 ajax 获取到的页面。它只有 640 kb 大小的容量，所以如果想储存超过这个大小的数据可以存储在 sessionStorage 或者 localStorage 中，这俩有 5 mb 的容量

# 使用 history.pushState 和 history.replaceState

这两个的功能分别是一个追加一个替换，就像盘子样一个忘上叠一个更换而浏览器就会显示最上面的盘子 他们的参数，设置方法都一样

var state = {
    url:"http://???",
    title:null,
    data:String
}
history.pushState(state,state.title,state.url)

# 使用 popstate 监测浏览器前进后退 

window.onpopstate = function (val){
     var state = val.state;
     if(state!==null)console.log(state);
}

读取 state 里面的数据然后替换 dom 就可以了

# 其他

第一次追加记录时会导致回退时页面无变化，state 没有值，所以第一次应该使用 replaceState 来替换

//写入历史记录
function writeHistory(state) {
   if(history.state===null){
       window.history.replaceState(state,state.title, state.url);
   }else {
       window.history.pushState(state,state.title, state.url);
   }
}
#JavaScript